<template>
  <div class="upload-preview-container">
    <div class="upload-section">
      <el-upload class="upload-demo" :action="uploadUrl" list-type="picture-card" :on-change="handleChange"
        :file-list="fileList" :auto-upload="true" :on-success="uploadSuccess">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div class="preview-section">
      <img v-show="previewImage" :src="previewImage || ''" alt="Uploaded Image" class="preview-image" />
    </div>
  </div>
</template>

<script>
import { vehicleExitParking, vehicleExitParking_ } from "@/api/Approach";
import { getRoleListApi, logoutApi, getUserInfoApi } from "@/api/auth";

export default {
  name: "Approach",
  data() {
    return {
      fileList: [],
      previewImage: "",
      uploadUrl: import.meta.env.VITE_APP_BASE_API
        ? `${import.meta.env.VITE_APP_BASE_API}/upload_image`
        : "/upload_image", // 确保 uploadUrl 始终为字符串
    };
  },
  methods: {
    handleChange(file) {
      if (file.raw) {
        // 清空文件列表并更新预览图片
        this.fileList = [file];
        this.previewImage = URL.createObjectURL(file.raw);
      }
    },
    async uploadSuccess(response, file) {
      console.log("文件上传成功", response, file);
      const ID = localStorage.getItem("userId"); // 确保 ID 在方法中可用
      vehicleExitParking_({
        user_id: ID,
        license_plate_number: response['plate_number'],
      }).then(res => {
        if (res.data.status == 'error') {
          this.$message.error(res.data.message);
        } else if (res.data.status == 'success') {
          this.$confirm(`进厂时间:${res.data['entry_time']}<br/>出场时间:${res.data['exit_time']}<br/>当前余额:$${res.data['user_balance']}<br/>产生费用:$${res.data['charge_amount']}`, '支付信息', {
            confirmButtonText: '确定支付',
            cancelButtonText: '取消',
            type: 'success',
            dangerouslyUseHTMLString: true,
          }).then(() => {
            vehicleExitParking({
              user_id: ID,
              license_plate_number: response['plate_number'],
            })
              .then((res) => {
                console.log(res);
                this.$message.success("出场成功");
                const user = JSON.parse(localStorage.getItem("user"))
                getRoleListApi({ name: user['name'] }).then((res) => {
                  if (res.data) {
                    localStorage.setItem("user", JSON.stringify(res.data[0]) || "");
                  }
                })
              })
              .catch((err) => {
                console.error("出场失败", err);
                this.$message.error(err.response.data.message);
              });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消出场'
            });
          });
        }
      })


    },
  },
  created() {
  },
};
</script>

<style scoped>
.upload-preview-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  height: 100vh;
  /* 高度铺满全屏 */
  box-sizing: border-box;
}

.upload-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
}

.preview-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
